<template>
    <div>
       <div class="float">
         <Tree :expand=false @on-select-change='getchild' :data="treeData"></Tree></div>
       <div class="float-r">
          <div style="margin-bottom:10px">
            <Input v-model='value' @on-search='search' suffix="ios-search" search placeholder="请输入产品名称" style="width: auto" />
            <div class="chouti">
                  <Button class="chouti" @click="show()" type="primary">添加产品</Button>
                  <Drawer
                      title="添加产品"
                      v-model="value3"
                      width="720"
                      :mask-closable="false"
                      :styles="styles"
                      @on-close='clearData'>
                      <Form :model="formData">
                          <Row :gutter="32">
                              <Col span="12">
                                  <FormItem label="产品名称" label-position="top">
                                      <Input v-model="formData.name"/>
                                  </FormItem>
                              </Col>
                              <Col span="12">
                                  <FormItem label="产品价格" label-position="top">
                                      <Input v-model="formData.price"/>
                                  </FormItem>
                              </Col>
                              <Col span="12">
                                  <FormItem label="成交量" label-position="top">
                                      <Input v-model="formData.turnover"/>
                                  </FormItem>
                              </Col>
                              <Col span="12">
                                  <FormItem label="评论" label-position="top">
                                      <Input v-model="formData.comments"/>
                                  </FormItem>
                              </Col>
                              <Col span="12">
                                  <FormItem label="存量" label-position="top">
                                      <Input v-model="formData.partyaksa"/>
                                  </FormItem>
                              </Col>
                              <Col span="12">
                                  <FormItem label="优惠" label-position="top">
                                      <Input v-model="formData.preferential"/>
                                  </FormItem>
                              </Col>
                              <Col span="12">
                                  <FormItem label="图片" label-position="top">
                                      <Input v-model="formData.pic"/>
                                  </FormItem>
                              </Col>
                               <Col span="12">
                                  <FormItem label="类型" label-position="top">
                                      <Input v-model="formData.kinds"/>
                                  </FormItem>
                              </Col>
                               <Col span="12">
                                  <FormItem label="superior" label-position="top">
                                      <Input v-model="formData.superior"/>
                                  </FormItem>
                              </Col>
                               <Col span="12">
                                  <FormItem label="种类" label-position="top">
                                      <Input v-model="formData.type"/>
                                  </FormItem>
                              </Col>
                              <Col span="12">
                                  <FormItem label="类型" label-position="top">
                                      <Input v-model="formData.belong"/>
                                  </FormItem>
                              </Col>
                          </Row>
                      </Form>
                      <div class="demo-drawer-footer">
                          <Button style="margin-right: 8px" @click="productCancel">取消</Button>
                          <Button type="primary" @click="meth">确认</Button>
                      </div>
                  </Drawer>    
            </div>
            
            <Button type="primary" @click="deletedmore">批量删除</Button>
        </div> 
        <Table border :columns="columns7" :data="data6"
        @on-select="deleteData" @on-select-cancel="deleteData" @on-select-all="deleteData" @on-select-all-cancel="deleteData"></Table>
        <Page @on-change='changepage' :total=total :page-sizi=limit  class="fenye"/>
       </div>
        
    </div>
</template>

<script>
export default {
  data() {
    return {
      columns7: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "名称",
          key: "name"
        },
        {
          title: "价格",
          key: "price"
        },
        {
          title: "成交量",
          key: "turnover"
        },
        {
          title: "存量",
          key: "partyaksa"
        },
        {
          title: "优惠",
          key: "preferential"
        },
        {
          title: "种类",
          key: "kinds"
        },
        {
          title: "操作",
          key: "action",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.choseId = params.row._id;
                      this.show(params);
                    }
                  }
                },
                "编辑"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.delete(params.row._id);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      data6: [],
      treeData: [],
      value3: false,
      meth: "",
      value: "",
      limit: 10,
      page: 1,
      total: 0,
      choseId: "",
      deletearr: [],
      parentId:'',
      httpurl: "http://10.31.156.62:3000",
      styles: {
        height: "calc(100% - 55px)",
        overflow: "auto",
        paddingBottom: "30px",
        position: "static"
      },
      formData: {
      }
    };
  },
  methods: {
    getlist() {
      var vm = this;
      this.axios({
        method: "post",
        url: this.httpurl + "/product/list",
        data: {
          parentId:this.parentId,
          page: this.page,
          rows: this.limit
        }
      }).then(function(res) {
        vm.total = res.data.total;
        vm.data6=res.data.rows;
      });
    },
    gettree(){
      this.axios({
        method:'post',
        url:this.httpurl+"/cate/list/2"
      }).then(res=>{
          this.treeData=res.data;
      })
    },
    show() {
      this.value3 = true;
      if (this.choseId) {
        //修改
        this.axios({
          url: this.httpurl + `/product/data/${this.choseId}`
        }).then(res => {
          this.formData = res.data;
        });
        this.meth = this.edit;
      } else {
        //新增
        this.clearData();
        this.meth = this.addproducts;
      }
    },
    delete(index) {
      //删除
      this.$Modal.confirm({
        title: "确认删除",
        content: "<p>你确定要删除吗</p>",
        onOk: () => {
          this.axios({
            method: "delete",
            url: this.httpurl + `/product/data/${index}`
          }).then(res => {
            this.getlist();
            this.$Message.success("删除成功");
          });
        }
      });
      
    },
    clearData() {
      this.formData = {};
      this.choseId = "";
    },
    productCancel() {
      this.clearData();
      this.value3 = false;
    },
    addproducts() {

      this.formData['parentId']=this.parentId;
      this.axios({
        method: "post",
        url: this.httpurl + "/product/data",
        data: this.formData
      }).then(() => {
        this.getlist();
        this.value3 = false;
        this.formData = {};
      });
    },
    edit() {
      this.axios({
        method: "put",
        url: this.httpurl + `/product/data/${this.choseId}`,
        data: this.formData
      }).then(() => {
        this.value3 = false;
        this.getlist();
        this.formData = {};
        this.choseId = "";
      });
    },
    changepage(page) {
      var vm = this;
      this.page = page;
      this.axios({
        method: "post",
        url: this.httpurl + "/product/list",
        data: {
          page: this.page,
          rows: this.limit
        }
      }).then(function(res) {
        vm.data6 = res.data.rows;
      });
    },
    search() {
      this.axios({
        url: this.httpurl + `/product/list`,
        method: "post",
        data: {
          name: this.value
        }
      }).then(res => {
        this.data6 = res.data.rows;
      });
    },
    deleteData(val) {
      this.deletearr = val;
    },
    deletedmore() {
      var ids = [];
      
      if (this.deletearr.length>0) {
        for (var i = 0; i < this.deletearr.length; i++) {
          ids.push(this.deletearr[i]._id);
        }
        this.$Modal.confirm({
          title: "确认删除",
          content: "<p>你确定要删除这些新闻吗</p>",
          onOk: () => {
            this.axios({
              url: this.httpurl + `/product/data/removes`,
              method: "post",
              data: {
                ids: ids.toString()
              }
            }).then(res => {
              this.$Message.success("删除成功!");
              this.getlist();
              this.deletearr = [];
            });
          }
        });
      } else {
        this.$Message.warning("至少选中一个");
      }
    },
    getchild(s){
      if(s){
        this.parentId=s[0]._id;
        this.axios({
          url: this.httpurl + `/product/list`,
          method: "post",
          data: {
            parentId: this.parentId
          }
        }).then(res => {
          this.data6 = res.data.rows;
        });
      }
     

    }
  },
  mounted() {
    this.gettree();
  }
};
</script>

<style scoped>
.fenye {
  margin-top: 15px;
  text-align: center;
  margin-bottom: 10px;
}
.demo-drawer-footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: center;
  background: #fff;
}
.chouti {
  display: inline;
}
.float{
  float: left;
  width: 10%;
}
.float-r{
   float: left;
   width: 90%;
}
</style>

